#sullivan-record {
    overflow: hidden;
    width: 1000px;
}

:root {
    --modal-bg: rgb(12, 33, 60);
}
.time-axis {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: var(--modal-bg);
    padding: calc(var(--auto-width, 10px) * 0.1) calc(var(--auto-width, 10px) * 0.5);
    border: 1px solid;
    // background-origin: border-box;
    border-color: initial;
    background-clip: content-box, border-box;
    // background-image: linear-gradient(#112, #112), linear-gradient(to right bottom, #01b8fd, #023d8a, #023d8a, #01b8fd);
    // overflow-y: auto;
    cursor: initial;
    user-select: none;
    .time-scroller {
        position: relative;
        display: flex;
        // width: calc(42px * 24);
        width: 100%;
        // border: 1px solid red;
        height: 12px;
        .time-axis-scroll {
            position: absolute;
            box-sizing: border-box;
            background: #0189d1;
            height: 12px;
            // border-radius: 10px;
            cursor: pointer;
        }
        .time-pointer {
            position: absolute;
            top: calc(var(--auto-height, 10px) * 2);
            left: calc(var(--auto-width, 10px) * -0.4);
            width: calc(var(--auto-width, 10px) * 0.8);
            height: calc(var(--auto-height, 10px) * 1.4);
            background: #fff;
            z-index: 1;
        }
        .time-arrow {
            position: relative;
            top: calc(var(--auto-height, 10px) * -0.14);
            left: calc(var(--auto-width, 10px) * 0.1);
            width: calc(var(--auto-width, 10px) * 0.6);
            height:  calc(var(--auto-height, 10px) * 0.6);
            transform: rotate(45deg);
            background: #fff;
        }
        .datetime-description {
            position: absolute;
            font-size: calc(var(--font-size, 14px) * 0.86);
            height: 100%;
            line-height: 90%;
            transform: translateX(-50%);
            color: #fff;
            z-index: 9;
            opacity: .6;
            pointer-events: none;
        }
    }
    .time-timeline {
        display: flex;
        // justify-content: space-evenly;
        border-top: 1px solid #ccc;
        cursor: initial;
        background: rgba(0, 0, 0, 0.2);
        position: relative;
        .timeline-hour {
            flex: 1;
            position: relative;
            box-sizing: border-box;
            height: 20px;
            font-size: calc(var(--font-size, 14px) * 0.86);
            text-align: left;
            // border-left: 1px solid #fff;
            color: #aaa;
            // padding-left: calc(var(--auto-width, 10px) * 0.5);
            display: flex;
            // align-items: flex-start;
            justify-content: space-evenly;
            border-right: 1px solid #aaa;
            &:first-child {
                border-left: 1px solid #aaa;
            }
        }
        .timeline-hour-text {
            position: absolute;
            left: 2px;
            bottom: 0;
            line-height: calc(var(--font-size, 14px) * 0.86);
        }
        .timeline-hour-half-text {
            position: absolute;
            bottom: 2px;
            transform: translateX(-50%);
            font-size: calc(var(--font-size, 14px) * 0.66);
            color: #999;
        }
        .timeline-minute-text {
            position: absolute;
            bottom: 2px;
            transform: translateX(-50%);
            font-size: calc(var(--font-size, 14px) * 0.66);
            color: #666;
        }
        .timeline-minute {
            width: 1px;
            &:not(.timeline-hour-half) {
                background: #666;
            }
            &:not(.timeline-hour-half):not(.time-longer) {
                height: 25%;
            }
            &.time-longer {
                background: #777;
                height: 35%;
            }
            &.timeline-hour-half {
                background: #999;
                &:not(.time-longer) {
                    height: 50%;
                }
                &.time-longer {
                    height: 75%;
                }
            }
        }
    }
}

